<template>
    <el-select
      v-model="selectValue"
      multiple
      placeholder="请选择"
      :popper-append-to-body="true"
      @remove-tag="removeTag"
      collapse-tags
      collapse-tags-tooltip
      @clear="clearAll"
      clearable
      filterable
      :filter-method="filterMethod"
    >
      <el-option
        v-loading="treeLoading"
        :value="selectTree"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        element-loading-text="loading"
        class="option-style"
        disabled
      >
        <div class="check-box">
          <el-button type="primary" text @click="handleCheckAll">全选</el-button>
          <el-button type="primary" text @click="clearAll">清空</el-button>
        </div>
        <el-tree
          :data="fileTypeTree"
          :props="treeProps"
          ref="tree"
          show-checkbox
          :expand-on-click-node="false"
          node-key="id"
          check-on-click-node
          highlight-current
          @check="handleCheckClick"
          :filter-node-method="filterNode"
          class="tree-style"
        ></el-tree>
      </el-option>
    </el-select>
  </template>
   
  <script>
  import 'element-plus/dist/index.css'
   
  export default {
    name: 'App',
    data() {
      return {
        noticeTypeId: [], // 最后获取的选择id
        treeProps: {
          value: 'id',
          label: 'name',
          children: 'children',
          isLeaf: 'isLeaf',
        },
        fileTypeTree: [],
        selectValue: [], // 文本框中的标签
        selectTree: [], // 绑定el-option的值
        treeLoading: false,
        data: [
        {
            id: 1,
            label: 'Level one 1',
            name: 'Level one 1',
            children: [
            {
                id: 1.1,
                label: 'Level two 1-1',
                name: 'Level one 1-1',
                children: [
                    {
                        id: '1.1.1',
                        name: 'Level three 1-1-1',
                        label: 'Level three 1-1-1',
                    },
                ],
            },
            ],
        },
        {
            id: 2,
            label: 'Level one 2',
            name: 'Level one 2',
            children: [
            {
                id: 2.1,
                name: 'Level two 2-1',
                label: 'Level two 2-1',
                children: [
                {
                    id: '2.1.1',
                    name: 'Level three 2-1-1',
                    label: 'Level three 2-1-1',
                },
                ],
            },
            {
                id: 2.2,
                label: 'Level two 2-2',
                name: 'Level two 2-2',
                children: [
                {
                    id: '2.2.1',
                    name: 'Level two 2-2',
                    label: 'Level three 2-2-1',
                },
                ],
            },
            ],
        },
        ]
      }
    },

    async created() {
      // 树结构数据
    //   const resFile = await getFileTypeTree()
    //   if (resFile.data.code === 20000) {
    //     this.fileTypeTree = resFile.data.data
    //   }

     this.fileTypeTree = this.data
     this.selectTree = this.data
     console.log(this.selectTree)
      // 如果noticeTypeId有初始值，需要加入以下代码回显值
    //   this.$nextTick(() => {
    //     this.noticeTypeId.forEach((v) => {
    //       this.$refs.tree.setChecked(v, true, true)
    //     })
    //   })
    //   this.selectTree = this.flattenTree(this.fileTypeTree)
      // 筛选出匹配的对象并返回其 name 属性
    //   this.selectValue = this.selectTree
    //     .filter((item) => this.noticeTypeId.includes(item.id)) // 过滤出id匹配的数据
    //     .map((v) => ({
    //       label: v.name,
    //       value: v.id,
    //     }))
    },
    methods: {
      // 平铺树状结构
      flattenTree(tree) {
        const result = []
        function traverse(node) {
          result.push({
            id: node.id,
            name: node.label,
          })
          if (node.children && node.children.length > 0) {
            node.children.forEach((child) => traverse(child))
          }
        }
        tree.forEach((rootNode) => traverse(rootNode))
        return result
      },
      // 全选
      handleCheckAll() {
        this.treeLoading = true
        setTimeout(() => {
          this.$refs.tree.setCheckedNodes(this.fileTypeTree)
          this.treeLoading = false
        }, 200)
        this.selectTree = this.flattenTree(this.fileTypeTree)
        this.selectValue = this.selectTree.map((v) => ({
          label: v.name,
          value: v.id,
        }))
        this.noticeTypeId = this.selectTree.map((v) => v.id)
      },
      /**
       * @description: 勾选树形选项
       * @param {*} data 传递给 data 属性的数组中该节点所对应的对象
       * @param {*} node  树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
       * @return {*}
       */
      handleCheckClick(data, node) {
        console.log('handleCheckClick----', data, node)
        this.selectTree = node.checkedNodes
        this.selectValue = this.selectTree.map((v) => ({
          label: v.name,
          value: v.id,
        }))
        this.noticeTypeId = node.checkedKeys
      },
      removeTag(tag) {
        this.selectValue = this.selectValue.filter((v) => v.id !== tag.value)
        this.selectTree = this.selectTree.filter((v) => v.id !== tag.value)
        this.noticeTypeId = this.selectTree.map((v) => v.id)
        this.$nextTick(() => {
          this.$refs.tree.setCheckedNodes(this.selectTree)
        })
      },
      clearAll() {
        this.treeLoading = true
        this.selectTree = []
        this.selectValue = []
        this.noticeTypeId = []
        setTimeout(() => {
          this.fileTypeTree.forEach((v) => {
            this.$refs.tree.setChecked(v.id, false, true) // 在树状结构没有展开时，使用setChecked才能改变节点状态
          })
          this.treeLoading = false
        }, 200)
      },
      // 输入框关键字
      filterMethod(val) {
        this.$refs.tree.filter(val)
      },
      /**
       * @description: tree搜索过滤
       * @param {*} value 搜索的关键字
       * @param {*} data  筛选到的节点
       * @return {*}
       */
      filterNode(value, data) {
        if (!value) return true
        return data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
      },
    },
  }
  </script>